<template>
  <div class="charts">
    <p class="c-title">智能设备运营驾驶舱</p>
    <div class="full" @click="info"><dv-border-box-12 >全屏</dv-border-box-12></div>
    <div class="top-border">
      <dv-decoration-8 style="width:300px;height:40px;margin-top:-45px" />
      <dv-decoration-5 :dur="5" style="width:600px;height:40px;margin:-30px auto" />
      <dv-decoration-8 :reverse="true" style="width:300px;height:40px;margin-top:-45px" />
    </div>
    <div class="charts-all">
      <el-row :gutter="15">
        <el-col :span="6">
          <div class="box-a">
            <dv-border-box-13>
              <div class="box1">
                <div class="dv-box">
                  <div class="zs">
                    <p>库存数量</p>
                    <dv-decoration-1 style="width:200px;height:8px;" />
                  </div>
                  <h2>8000<span>件</span></h2>
                  <div class="zs">
                    <p>库存金额</p>
                    <dv-decoration-1 style="width:200px;height:8px;" />
                  </div>
                  <h2>6999<span>万元</span></h2>
                </div>
              </div>
            </dv-border-box-13>
            <dv-border-box-13>
              <div class="box2">
                <div class="chats-a">
                  <div class="border-l3">
                    <div class="box-xx">
                      <dv-border-box-6><h3>入库数量</h3><p>3996件</p></dv-border-box-6>
                    </div>
                    <div class="box-xx">
                      <dv-border-box-6><h3>入库金额</h3><p>60万元</p></dv-border-box-6>
                    </div>
                  </div>
                  <div style="margin-top: 8px" class="border-l3">
                    <div class="box-xx">
                      <dv-border-box-6><h3>出库数量</h3><p>4500件</p></dv-border-box-6>
                    </div>
                    <div class="box-xx">
                      <dv-border-box-6><h3>出库金额</h3><p>72万元</p></dv-border-box-6>
                    </div>
                  </div>
                  <div class="jnt">
                    <div class="op1"><e-charts style="width: 76%;height: 36vh;padding-left: 4vw" autoresize :option="optionTop2" /></div>
                  </div>
                </div>
              </div>
            </dv-border-box-13>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box-b">
            <dv-border-box-8 :dur="10">
              <div class="box3">
                <div class="m-title"><h1>故障报修单工单完成情况（月度）</h1></div>
                <div class="chart-a"><e-charts style="height: 33vh;width: 98%" autoresize :option="option3" /></div>
              </div>
            </dv-border-box-8>
            <dv-border-box-13>
              <div class="box4">
                <div class="charts-title"><span>>></span>专业维护工单执行情况（月度）</div>
                <div class="chart-a"><e-charts style="height: 30vh;width: 100%" autoresize :option="option4" /></div>
              </div>
            </dv-border-box-13>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box-c">
            <dv-border-box-13>
              <div class="box5">
                <div class="chats-b">
                  <div class="charts-title"><span>>></span>MTBF</div>
                  <div class="chart-a"><e-charts style="height: 20vh;width:95%;margin-top: -2%" autoresize :option="option5" /></div>
                </div>
                <div class="chats-b">
                  <div class="charts-title"><span>>></span>MTTR</div>
                  <div class="chart-a"><e-charts style="height: 20vh;width:96%;margin-bottom: 10px" autoresize :option="option6" /></div>
                </div>
              </div>
            </dv-border-box-13>
            <dv-border-box-13>
              <div class="box6">
                <div class="charts-title"><span>>></span>设备可动率</div>
                <div class="chart-a"><e-charts style="height: 24vh;width: 98%;margin-top: 14px" autoresize :option="option7" /></div>
              </div>
            </dv-border-box-13>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
const BorderWidth = '6'
const placeHolderStyle = {
  normal: {
    label: {
      show: false,
      position: 'center'
    },
    labelLine: {
      show: false
    },
    color: '#0e2f94',
    borderColor: 'rgba(0,0,0,0)'
    // borderWidth: 50
  },
  emphasis: {
    color: '#dedede',
    borderColor: '#dedede',
    borderWidth: 0
  }
}
export default {
  data() {
    return {
      fullscreenFlag: false,
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    option() {
      return {
        color: ['#ff0101', '#ff7e00', '#e5cf10', '#23c668', '#02a1e5'],
        legend: {
          show: true,
          orient: 'vertical',
          right: 'right',
          top: 'middle',
          data: ['冲压', '涂装', '车身', '总装', '质量'],
          itemHeight: 5,
          right: 1,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        series: [{
          name: '冲压',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [78, 79],
          itemStyle: {
            normal: {
              label: {
                show: false,
                position: 'outside'
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#ff0101',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 7,
            name: '70%'
          },
            {
              value: 3,
              name: '',
              itemStyle: placeHolderStyle
            }
          ]
        }, {
          name: '涂装',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [68, 69],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#ff7e00',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 6,
            name: '60%'
          },
            {
              value: 4,
              name: '',
              itemStyle: placeHolderStyle
            }
          ]
        }, {
          name: '车身',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [58, 59],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#e5cf10',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 5,
            name: '40%'
          },
            {
              value: 5,
              name: '',
              itemStyle: placeHolderStyle
            }
          ]
        }, {
          name: '总装',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [48, 49],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#23c668',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 5,
            name: '30%'
          },
            {
              value: 5,
              name: '',
              itemStyle: placeHolderStyle
            }
          ]
        }, {
          name: '质量',
          type: 'pie',
          legendHoverLink: false,
          clockWise: true,
          hoverAnimation: false,
          radius: [38, 39],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false,
                length: 100,
                smooth: 0.5
              },
              borderWidth: BorderWidth,
              shadowBlur: 40,
              borderColor: '#02a1e5',
              shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
            }
          },
          data: [{
            value: 4,
            name: '30%'
          },
            {
              value: 6,
              name: '',
              itemStyle: placeHolderStyle
            }
          ]
        }]
      }
    },
    option1() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          itemHeight: 5,
          top: 30,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            min: 0,
            max: 80,
            position: 'right',
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            }
          },
          {
            type: 'value',
            min: 0,
            max: 80,
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            position: 'left',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            }
          }
        ],
        yAxis: [
          {
            nameTextStyle: { // 关键代码
              padding: [-50, 0, 10, 0],
              color: '#00deff'
            },
            type: 'category',
            data: ['质量', '生管', '动力', '冲压', '总装', '车身', '涂装'],
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          },
          {
            type: 'category',
            nameTextStyle: { // 关键代码
              color: '#00deff'
            },
            position: 'right',
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: '停线时间',
            type: 'bar',
            data: [50, 60, 30, 50, 110, 40, 10],
            barWidth: '20%',
            itemStyle: {
              color: '#53f1f2', // 柱条颜色
              borderType: 'dashed' // 柱条描边类型，默认值'solid'；可取值'solid', 'dashed', 'dotted'
            }
          },
          {
            name: '维护费用',
            type: 'bar',
            data: [66, 20, 60, 50, 61, 102, 50],
            barWidth: '20%',
            itemStyle: {
              color: '#faa234', // 柱条颜色
              borderType: 'dashed' // 柱条描边类型，默认值'solid'；可取值'solid', 'dashed', 'dotted'
            }
          }
        ]
      }
    },
    option2() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['车身', '总装', '涂装', '冲压', '动力', '生管'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位（次）',
            min: 0,
            max: 250,
            nameTextStyle: { // 关键代码
              padding: [-50, 0, 10, 500],
              color: '#00deff'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [
              {
                value: 99,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#047fdd' },
                    { offset: 0.5, color: '#264dd6' },
                    { offset: 1, color: '#3c2bd1' }
                  ])
                }
              },
              {
                value: 200,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#fdd401' },
                    { offset: 0.5, color: '#fdb602' },
                    { offset: 1, color: '#fc9701' }
                  ])
                }
              },
              {
                value: 102,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#64dee3' },
                    { offset: 0.5, color: '#3ab5e1' },
                    { offset: 1, color: '#0685de' }
                  ])
                }
              },
              {
                value: 66,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#ff971a' },
                    { offset: 0.5, color: '#fe661b' },
                    { offset: 1, color: '#fe441b' }
                  ])
                }
              },
              {
                value: 33,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#affdcf' },
                    { offset: 0.5, color: '#54d98c' },
                    { offset: 1, color: '#2ac96b' }
                  ])
                }
              },
              {
                value: 12,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#047fdd' },
                    { offset: 0.5, color: '#264dd6' },
                    { offset: 1, color: '#3c2bd1' }
                  ])
                }
              }
            ]
          }
        ]
      }
    },
    option3() {
      return {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器
            type: 'cross' // 十字准星指示器
            // label:{
            //     backgroundColor:'#ccc'
            // }
          }
        },
        legend: {
          data: ['待办', '完成', '超时', '申请停产'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['冲压车间', '焊装车间', '涂装车间', '总装车间', '动力车间', '生产管理部', '质量部']
        },
        yAxis: {
          name: '（百分比）',
          min: 0,
          max: 100,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        series: [
          {
            name: '待办',
            type: 'line',
            stack: '总览',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              color: '#264dd6',
              normal: {
                lineStyle: {
                  color: '#264dd6',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#264dd6',// 背景颜色
                  opacity: 0.8 // 透明度
                }
              }
            },
            data: [30, 20, 26, 26, 12, 30, 20]
          },
          {
            name: '完成',
            type: 'line',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#24c467',
                lineStyle: {
                  color: '#24c467',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#24c467', // 背景颜色
                  opacity: 0.4 // 透明度
                }
              }
            },
            data: [75, 85, 90, 78, 85, 91, 75]
          },
          {
            name: '超时',
            type: 'line',
            stack: '总览',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: 'red',
                lineStyle: {
                  color: 'red',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: 'red', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [0, 15, 10, 15, 18, 18, 12]
          }
        ]
      }
    },
    option4() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '待办', '完成', '超时', '申请停产', '停产审核'],
            ['车身', 43.3, 85.8, 12.7, 32.5, 12.8],
            ['总装', 23.3, 95.8, 21.7, 32.5, 31.8],
            ['涂装', 13.3, 85.8, 1.7, 42.5, 21.8],
            ['冲压', 33.3, 76.8, 31.7, 31.5, 22.8],
            ['动力', 42.3, 98.8, 13.7, 24.5, 21.8],
            ['生管', 13.3, 96.8, 14.7, 25.5, 16.8],
            ['质量', 41.3, 75.8, 15.7, 22.5, 14.8]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            },
            formatter: '{value} %'
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#64dee3' },
                { offset: 0.5, color: '#3ab5e1' },
                { offset: 1, color: '#0685de' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option5() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['一月', '四月', '八月', '十二月']
        },
        yAxis: {
          type: 'value',
          name: '分钟',
          min: 0,
          max: 150,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        series: [
          {
            name: '工厂',
            type: 'line',
            data: [90, 50, 88, 80, 70, 80, 110]
          },
          {
            name: '指标',
            type: 'line',
            data: [65, 55, 56, 66, 38, 40, 66]
          }
        ]
      }
    },
    option6() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['一月', '四月', '八月', '十二月']
        },
        yAxis: {
          type: 'value',
          name: '分钟',
          min: 0,
          max: 150,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        series: [
          {
            name: '工厂',
            type: 'line',
            data: [120, 50, 59, 66, 48, 32, 110]
          },
          {
            name: '指标',
            type: 'line',
            data: [120, 55, 56, 48, 38, 11, 66]
          }
        ]
      }
    },
    option7() {
      return {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器
            type: 'cross' // 十字准星指示器
            // label:{
            //     backgroundColor:'#ccc'
            // }
          }
        },
        legend: {
          data: ['指标', '工厂'],
          itemHeight: 1,
          itemWidth: 14,
          icon: 'rect',
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          },
          data: ['一月', '三月', '五月', '七月', '九月', '十一月']
        },
        yAxis: {
          min: 0,
          max: 100,
          nameTextStyle: { // 关键代码
            color: '#00deff'
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            },
            formatter: '{value} %'
          }
        },
        series: [
          {
            name: '指标',
            type: 'line',
            itemStyle: {
              color: '#faa234',
              normal: {
                color: '#faa234',
                lineStyle: {
                  color: '#faa234',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#faa234', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [40, 50, 60, 50, 60, 50, 60]
          },
          {
            name: '工厂',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#24c467',
                lineStyle: {
                  color: '#24c467',
                  width: 0
                },
                areaStyle: { // 添加背景颜色
                  type: 'default',
                  color: '#24c467', // 背景颜色
                  opacity: 0.5 // 透明度
                }
              }
            },
            data: [30, 20, 40, 80, 40, 65, 80]
          }
        ]
      }
    },
    optionTop2() {
      return {
        title: {
          text: '出库数量',
          subtext: 'top5',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            fontWeight: 400
          },
          subtextStyle: {
            fontSize: 18,
            color: '#fff',
            fontWeight: 400
          },
          textAlign: 'center',
          x: '48%',
          y: '42%'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '1%',
          bottom: '1%',
          left: 'center',
          itemWidth: 4,
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 600, name: '握把', itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0, x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#affdcf' },
                    { offset: 0.5, color: '#54d98c' }
                  ],
                  globalCoord: true
                }
              }
              },
              { value: 1233, name: '控制手柄', itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#2D38FF' },
                    { offset: 1, color: '#969BFB' }
                  ],
                  globalCoord: true
                }
              }
              },
              { value: 1048, name: '传感器', itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#fdd401' },
                    { offset: 0.5, color: '#fdb602' }
                  ],
                  globalCoord: true
                }
              }
              },
              { value: 1111, name: '挡件', itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#ff971a' },
                    { offset: 1, color: '#fe661b' }
                  ],
                  globalCoord: true
                }
              }
              },
              { value: 1048, name: '高温夹件', itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#54d98c' },
                    { offset: 0.5, color: '#00723c' }],
                  globalCoord: true
                }
              }
              }
            ]
          }
        ]
      }
    }
  },
  created() {

  },
  methods: {
    info() {
      screenfull.toggle()
      this.$router.push('/engineers/engineerFull')
    }
  }
}
</script>
<style scoped>
.charts{
  width: 100%;
  height: calc(100vh - 30px);
  margin-top: -10px;
  background-size: 100% 100%;
  background-color: #0c1330;
  background-repeat: no-repeat;
  overflow: hidden;
}
.c-title{
  font-size: 28px;
  color: #00deff;
  text-align: center;
}
.box1{
  height: 28vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box2{
  height: 52vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box3{
  height: 50vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box4{
  height: 28vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.box5{
  height: 50vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between ;
}
.box6{
  height: 30vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.charts-title{
  color: #21b7b5;
  margin-top: 18px;
  margin-left: 10px;
}
.zs{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.charts1{
  margin-left: -10%;
  margin-top: -4%;
}
.charts2{
  height: 22vh;
  width: 98%;
}
.charts-title span{
  width: 100px;
  height: 30vh;
  background-size: 100% 100%;
  background-color: #0c1330;
  background-repeat: no-repeat;
}
.charts-all{
  height: 100%;
  padding: 14px 1vw 0;
}
.box-a{
  height: 82vh;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
.box-b{
  height: 82vh;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
.box-c{
  height: 82vh;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
.m-title h1{
  color: #fff;
  text-align: center;
  font-size: 24px;
  padding-top: 40px;
}
.m-title span{
  display: inline-block;
  padding: 4px 8px ;
  background-image: linear-gradient(#0ca1bd, #0ccfb1);
  margin-right: 8px;
}
.m-title b{
  font-size: 18px;
  font-weight: normal;
}
.chart-a{
  width: 100%;
  height: 100%;
}
.charts img {
  position: fixed;
  left: 18px;
  top:20px
}
.top-border{
  display: flex;
}
.dv-box{
  width: 100%;
  height: 28vh;
  padding: 8px 18px 0;
}
.dv-box h2{
  color: #21b7b5;
  font-size: 25px;
  text-align: center;
}
.dv-box p{
  color: #fff;
  font-size: 14px;
}
.dv-box h2 span{
  color: #fff;
  font-size: 12px;
}
.box-xx{
  width: 9vw;
  height: 64px;
  margin-top: 8px;
}
.box-xx h3{
  padding-top: 14px;
  font-size: 14px;
  margin-left: 12px;
  font-weight: normal;
}
.box-xx p{
  font-size: 12px;
  margin-left: 16px;
  margin-top: -5px;
  color: #00deff;
}
.border-l3{
  display: flex;
  color: #fff;
  justify-content: space-evenly;
}
.jnt{
 padding-top: 26px;
}
.full{
  position: fixed;
  cursor:pointer;
  color: #00deff;
  font-size: 16px;
  /*border: 1px solid #00deff;*/
  margin-left: 3vw;
  margin-top: -70px;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 2.6;
}
</style>
<style>
.handle-button{
  display: block;
}
</style>
